<template>
	<div class="system-menu-container">
		<div class="breadcrumb-box">
			<Breadcrumb />
		</div>

		<div class="header-search flex space-between">
			<div>
				<el-select v-model="state.apiListParam.task_id" placeholder="请选择任务" size="default" @change="searchChange" clearable filterable style="width:200px;margin-right: 20px;">
					<el-option v-for="(item, index) in state.taskList" :key="index" :label="item.name"
						:value="item.id"></el-option>
				</el-select>
				<el-button size="default" type="primary" @click="searchChange()" >查询</el-button>
			</div>
		
		</div>

		<div class="page-main" v-loading="state.tableData.loading" ref="pageMain">
			<el-card shadow="hover" style="height:100%;">

				<el-table :data="state.tableData.data" style="width: 100%" :height="state.tableHeight"
					ref="multipleTableRef">
					<el-table-column label="序号" type="index" width="100" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="norm_list_info.name" label="指标名称" show-overflow-tooltip align="center">
					</el-table-column>
					<el-table-column prop="norm_list_info.sort" label="优先级" show-overflow-tooltip align="center">
						<template  #default="scope">
							<span style="color: #909399;" v-if="scope.row.norm_list_info.sort=='1'">低</span>
							<span style="color: #409EFF;" v-if="scope.row.norm_list_info.sort=='2'">中</span>
							<span style="color: #F56C6C;" v-if="scope.row.norm_list_info.sort=='3'">高</span>
						</template>
					</el-table-column>
                    <el-table-column prop="norm_list_info.level" label="难度等级" show-overflow-tooltip align="center"></el-table-column>
                    <el-table-column prop="norm_list_info.refer" label="信源" show-overflow-tooltip align="center">
						<template #default="scope">
							<el-link type="danger" v-if="checkUrl(scope.row.norm_list_info.refer)"  :href="scope.row.norm_list_info.refer" target ="_blank">点击查看</el-link>
							<span v-else>{{scope.row.norm_list_info.refer}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="norm_list_info.price" label="单价" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="status" label="完成情况" show-overflow-tooltip align="center">
						<template  #default="scope">
							<el-tag type='warning' v-if="scope.row.status==0" effect="plain" size="small">已领取未填写</el-tag>
							<el-tag type='success' v-if="scope.row.status==1" effect="plain" size="small">已完成未审核</el-tag>
							<el-tag type='danger' v-if="scope.row.status==2" effect="plain" size="small">审核未通过</el-tag>
							<el-tag type='warning' v-if="scope.row.status==3" effect="plain" size="small">已通过未结算</el-tag>
							<el-tag type='info' v-if="scope.row.status==4" effect="plain" size="small">已结算</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="250" fixed="right" align="center">
						<template #default="scope">
							<el-button size="small" @click="details(scope.row)"  type="primary">查看内容</el-button>
							<!-- <el-button size="small" @click="receive(scope.row.id)" type="danger">退回任务</el-button> -->
						</template>
					</el-table-column>
				</el-table>


				<div class="pagination-box">
					<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
						:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.apiListParam.page" background
						v-model:page-size="state.apiListParam.limit" layout="total, sizes, prev, pager, next, jumper"
						:total="state.tableData.total">
					</el-pagination>
				</div>

			</el-card>
		</div>

		<DetailDialog ref="DetailDialogRef" @refresh="getList()" />
	</div>
</template>

<script setup name="taskPackage-list">
import { getCurrentInstance } from 'vue';
import { claimTasksApi } from '/@/api/claimTasks/index';
import { taskPackageApi } from '/@/api/taskPackage/index';
import { ElMessageBox, ElMessage } from 'element-plus';
import { Session } from '/@/utils/storage';
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));
const DetailDialog = defineAsyncComponent(() => import('/@/views/claimTasks/admin/completed/details.vue'));

// 定义变量内容
const DetailDialogRef = ref()
const state = reactive({
	// 查询列表参数
	apiListParam: {
		page: 1,
		limit: 10,
		name: '',
		status:3,
		task_id:'',
	},
	// 任务领取参数
	apiReceiveParam: {
		id: '',
	},
	tableData: {
		data: [],
		loading: false,
		total: 0
	},
	tableHeight: '30vh',
	normListExtend:[],
	testIndex:0,
	taskList:[],
});

// 获取任务列表
const getTaskList = () => {
	taskPackageApi().taskPackageList({page:-1,limit:-1}).then(res => {
    state.taskList = res.data
  })
}
// 页面加载时
onMounted(() => {
	getTaskList()
	getList()
	state.tableHeight = getCurrentInstance().refs.pageMain.offsetHeight - 130 - 52 + "px";
});

/**
 * 搜索按钮
 */
 const test = () => {
	return state.testIndex+1;
}

/**
 * 搜索按钮
 */
const searchChange = () => {
	state.apiListParam.page = 1
	getList()
}

/**
 * 重置按钮
 */
const reset = () => {
	state.apiListParam.page = 1
	state.apiListParam.name = '';
	getList()
}
//校验链接
const checkUrl = (vlaue) =>{
	if (/^https?:\/\//.test(vlaue)) {
		return true;
	} else {
		return false;
	}
}
// 分页改变
const onHandleSizeChange = (val) => {
	state.apiListParam.limit = val;
	getList();
};
const onHandleCurrentChange = (val) => {
	state.apiListParam.page = val;
	getList();
};



// 获取列表
const getList = () => {
	state.tableData.loading = true
	claimTasksApi().normReceivesList(state.apiListParam).then(res => {
		state.tableData.loading = false
		let data =res.data.data;
		state.tableData.data = res.data.data
		state.tableData.total = res.data.total
	}).catch(() => {
		state.tableData.loading = false
	})

}

// /**
//  * 点击退回任务
//  */
// const receive = (id) => {
// 	state.apiReceiveParam.id  = id
// 	claimTasksApi().normReceivesRevoke(state.apiReceiveParam).then(res => {
// 		ElMessage.success('任务退回成功!');
// 		getList();
// 	}).catch(() => {
// 		state.tableData.loading = false
// 		getList();
// 	})
// }

/**
 * 点击查看
 */
const details = (data) => {
	DetailDialogRef.value.openDialog(data);
}


</script>

<style lang="scss" scoped>
.page-main {
	height: calc(100vh - 50px - 106px);
}
</style>
